import { ref, unref, watch } from "vue";

// 版本3
//    支持 immediate 配置
//    支持 refetch 配置，从新请求
//    支持 url 参数，可以为一个 ref 数据

// 定义一个默认配置项
const defaultOptions = {
  immediate: true,
  refetch: false,
};

function useFetch(url, options = defaultOptions) {
  // 定义好数据
  const isFetching = ref(false);
  const error = ref(null);
  const data = ref(null);

  // 定义一个调用接口的函数，execute
  function execute() {
    // 数据重置
    isFetching.value = true;
    error.value = null;
    data.value = null;

    // 调用接口
    fetch(unref(url))
      .then((response) => response.json())
      .then((result) => {
        // 接口成功
        data.value = result;
      })
      .catch((err) => {
        // 接口失败
        error.value = err;
      })
      .finally(() => {
        // 不管成功还是失败
        isFetching.value = false;
      });
  }

  // 支持 url 的变化
  if (options.refetch) {
    // TODO: 做一些数据的检查
    watch(url, execute);
  }

  // 看 options 中的 immediate 是否为 true
  if (options.immediate) {
    execute();
  }

  // 将数据返回给到调用者
  return {
    isFetching,
    error,
    data,
    execute,
  };
}

export default useFetch;
